<template>
    <div>
        <h1>Home组件</h1>
        <div class="row">
            <div class="col-3 border border-1">
                <div>菜单列表</div>
                <!-- <router-link to="/home/">Home0</router-link><br>
                <router-link to="/home/home1">Home1</router-link><br>
                <router-link to="/home/home2">Home2</router-link> -->
                <a href="#" @click.prevent="nav" to="/home/">Home0</a><br>
                <a href="#" @click.prevent="nav" to="/home/home1">Home1</a><br>
                <a href="#" @click.prevent="nav" to="/home/home2">Home2</a>
            </div>
            <div class="col-9 border border-1">
                <div>导航组件展示区</div>
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

// 1.创建router对象
const router = useRouter();
// 2.直接解构router对象，获取push函数
// const {push} = useRouter();

const nav = e =>{
    // e.preventDefault();
    console.log('点击...e.target=>',e.target.getAttribute('to'));//获取某一属性的值

    // 1.使用push函数
    router.push(e.target.getAttribute('to'));
    // 2. push(e.target.getAttribute('to'));
}



</script>


<style lang="scss" scoped>

</style>